<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰</title>
    <style>
        .slider {
            position: relative;
            height: 600px;
            width: 900px;
            overflow: hidden;
            margin: 0 auto;
        }

        .slider img {
            display: none;
            height: 600px;
            width: 900px;
            transition: transform 0.5s;
            margin: 0 auto;
        }

        .control-left,
        .control-right {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 24px;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;/* 高的层级值 */
        }

        .control-left {
            left: 10px;
        }

        .control-right {
            right: 10px;
        }

        .slide-number {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .number {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 20px;
            padding: 5px 10px;
            margin: 0 5px;
            cursor: pointer;
            border-radius: 50%;/* 将按钮样式改成圆形 */ 
            width: 20px;/* 调整宽高使其成为圆形 */
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .current {
            color: #fff;
            background: rgba(51, 122, 183, 0.8);
            border-radius: 5px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
            border-radius: 50%; /* 将按钮样式改成圆形 */
            width: 20px;/* 调整宽高使其成为圆形 */
            height: 20px;
        }
    </style>
</head>

<body>

    <div class="slider">
        <button class="control-left" onclick="prevSlide()">&lt;</button>
        <button class="control-right" onclick="nextSlide()">&gt;</button>
        <img src="/实验三/image/1.jpg" alt="Image 1" style="transform: scale(1)">
        <img src="/实验三/image/2.jpg" alt="Image 2" style="transform: scale(1)">
        <img src="/实验三/image/3.jpg" alt="Image 3" style="transform: scale(1)">
        <img src="/实验三/image/4.jpg" alt="Image 4" style="transform: scale(1)">

        <div class="slide-number">
            <span class="number current" onclick="goToSlide(0)">1</span>
            <span class="number" onclick="goToSlide(1)">2</span>
            <span class="number" onclick="goToSlide(2)">3</span>
            <span class="number" onclick="goToSlide(3)">4</span>

        </div>
    </div>

    <script>
        let currentSlide = 0;
        const totalSlides = document.querySelectorAll('.slider img').length;
        const slideNumbers = document.querySelectorAll('.number');

        function showSlide(slideIndex) {
            document.querySelectorAll('.slider img').forEach((img, index) => {
                if (index === slideIndex) {
                    img.style.display = 'block';
                    img.style.transform = 'scale(1)';
                } else {
                    img.style.display = 'none';
                    img.style.transform = 'scale(0.8)';
                }
            });
            slideNumbers.forEach((number, index) => {
                if (index === slideIndex) {
                    number.classList.add('current');
                } else {
                    number.classList.remove('current');
                }
            });
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(currentSlide);
        }

        function goToSlide(index) {
            showSlide(index);
            currentSlide = index;
        }

        showSlide(currentSlide);
    </script>
</body>

</html>